<template>
  <cardBlock>
    <template #default>
      <a-form :model="form" :style="{ width: '600px' }" @submit="handleSubmit">
        <!-- 用户名 -->
        <a-form-item field="username" tooltip="请输入用户名" label="用户名">
          <a-input v-model="form.userName" placeholder="请输入用户名" />
        </a-form-item>

        <!-- 密码 -->
        <a-form-item field="password" label="密码">
          <a-input v-model="form.password" placeholder="请输入密码" />
        </a-form-item>

        <!-- 真实姓名 -->
        <a-form-item field="nickname" label="名称">
          <a-input v-model="form.nickName" placeholder="请输入真实姓名" />
        </a-form-item>
        <!-- 真实姓名 -->
        <a-form-item field="email" label="邮箱">
          <a-input v-model="form.email" placeholder="请输入邮箱" />
        </a-form-item>
        <!-- 真实姓名 -->
        <a-form-item field="phone" label="手机">
          <a-input v-model="form.phone" placeholder="请输入手机号" />
        </a-form-item>

        <a-form-item field="type" label="身份">
          <a-radio-group v-model="form.role">
            <a-radio value="0">普通用户</a-radio>
            <a-radio value="1">专家</a-radio>
            <a-radio value="2">护工</a-radio>
            <a-radio value="3">养老院院长</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item field="operator" label="是否为管理员">
          <a-radio-group v-model="form.status">
            <a-radio :value="'admin'">是</a-radio>
            <a-radio :value="'common'">否</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item field="address" label="地址">
          <a-input v-model="form.location" placeholder="请输入地址" />
        </a-form-item>

        <a-form-item>
          <a-button html-type="submit">提交</a-button>
          <a-button class="changeBoxLogin" @click="onChange">切换登录</a-button>
        </a-form-item>
      </a-form>
    </template>
  </cardBlock>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import cardBlock from "@/components/common/card-block/index.vue";
import { Message } from "@arco-design/web-vue";
import { register } from "@/apis/oldman";
const props = defineProps<{ setLogin: (val: boolean) => void }>();
function onChange() {
  props.setLogin(true);
}

const form = reactive({
  userName: "",
  password: "",
  location: "",
  nickName: "",
  phone: "",
  email: "",
  status: "admin",
  role: 0,
});

const handleSubmit = async () => {
  const res = await register({ ...form } as any);
  if (res.data.code === 200) {
    Message.success("注册成功");
  } else {
    Message.error(res.data.msg);
  }
};
</script>
<style>
.changeBoxLogin {
  margin-left: 20px;
}
</style>
